console.log. This command is used to print
something onto the screen. As we write
our first lines of code, we’ll be
using console.log
frequently as a way to visually see
the output of our programs. Let’s
write our first program:
Depending on how you structure your code, sometimes you’ll be able to omit semicolons at the end of lines. For now, you’ll want to include them just as we do.
//):
//
/*
and */
to avoid it from being
executed
var — The most common variable.
It can be reassigned but only
accessed within a function.
Variables defined with var
move to the top when the code
is executed.
const — Can not be reassigned and
not accessible before they
appear within the code.
let — Similar to const, the let
variable can be reassigned but
not re-declared.
=
to assign them:
var age = 23
var x
var a =
"init"
var b = 1 + 2 + 3
var c = true
const PI = 3.14
var name =
{firstName:"John",
lastName:"Doe"}
lastname
and lastName
will be handled as two different
variables.
fruit
which contains three items that you
can use for future operations.
concat() — Join several arrays into
one
indexOf() — Returns the first position
at which a given element
appears in an array
join() — Combine elements of an
array into a single string and
return the string
lastIndexOf() — Gives the last position at
which a given element appears
in an array
pop() — Removes the last element
of an array
push() — Add a new element at the
end
reverse() — Sort elements in a
descending order
shift() — Remove the first element
of an array
slice() — Pulls a copy of a portion
of an array into a new
array
sort() — Sorts elements
alphabetically
splice() — Adds elements in a
specified way and
position
toString() — Converts elements to
strings
unshift()
—Adds a new element to the
beginning
valueOf() — Returns the primitive
value of the specified
object
+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator,
operations within brackets are
executed earlier than those
outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers
== — Equal to
=== — Equal value and equal
type
!= — Not equal
!== — Not equal value or not
equal type
> — Greater than
< — Less than
>= — Greater than or equal
to
<= — Less than or equal
to
? — Ternary operator
&& — Logical and
|| — Logical or
! — Logical not
& — AND statement
| — OR statement
~ — NOT
^ — XOR
<< — Left shift
>> — Right shift
>>> — Zero fill right
shift
function
keyword plus a name. The function’s
parameters are in the brackets and you
have curly brackets around what the
function performs. You can create your
own, but to make your life easier –
there are also a number of default
functions.
alert() — Output data in an alert
box in the browser
window
confirm() — Opens up a yes/no dialog
and returns true/false
depending on user click
console.log() — Writes information to the
browser console, good for
debugging purposes
document.write() — Write directly to the HTML
document
prompt() — Creates a dialogue for
user input
decodeURIComponent() — Decodes a URI
component
encodeURI() — Encodes a URI into
UTF-8
encodeURIComponent() — Same but for URI
components
eval() — Evaluates JavaScript code
represented as a string
isFinite() — Determines whether a
passed value is a finite
number
isNaN() — Determines whether a value
is NaN or not
Number()
—- Returns a number converted
from its argument
parseFloat() — Parses an argument and
returns a floating-point
number
parseInt() — Parses its argument and
returns an integer
for — The most common way to
create a loop in
JavaScript
while — Sets up conditions under
which a loop executes
do while — Similar to the while
loop but it executes at least
once and performs a check at
the end to see if the
condition is met to execute
again
break
—Used to stop and exit the
cycle at certain
conditions
continue — Skip parts of the cycle if
certain conditions are
met
if else
is the switch
statement. However, using the switch
you select one of several code blocks
to execute.
John Doe
is the string.
\' — Single quote
\" — Double quote
\\ — Backslash
\b — Backspace
\f — Form feed
\v — Vertical tabulator
charAt() — Returns a character at a
specified position inside a
string
charCodeAt() — Gives you the Unicode of a
character at that
position
concat() — Concatenates (joins) two
or more strings into one
fromCharCode() — Returns a string created
from the specified sequence of
UTF-16 code units
indexOf() — Provides the position of
the first occurrence of a
specified text within a
string
lastIndexOf() — Same as indexOf()
but with the last occurrence,
searching backward
match() — Retrieves the matches of a
string against a search
pattern
replace() — Find and replace specified
text in a string
search() — Executes a search for a
matching text and returns its
position
slice() — Extracts a section of a
string and returns it as a new
string
split() — Splits a string object
into an array of strings at a
specified position
substr() — Similar to slice()
but extracts a substring
depending on a specified
number of characters
substring() — Also similar to slice()
but can’t accept negative
indices
toLowerCase() — Convert strings to lower
case
toUpperCase() — Convert strings to upper
case
valueOf() — Returns the primitive
value (that has no properties
or methods) of a string
object
e — Evaluate replacement
i — Perform case-insensitive
matching
g — Perform global
matching
m — Perform multiple line
matching
s — Treat strings as a single
line
x — Allow comments and
whitespace in the
pattern
U — Ungreedy pattern
[abc] — Find any of the characters
between the brackets
[^abc] — Find any character which
is not in the brackets
[0-9] — Used to find any digit
from 0 to 9
[A-z] — Find any character from
uppercase A to lowercase
z
(a|b|c) — Find any of the
alternatives separated with |
. — Find a single character,
except newline or line
terminator
\w — Word character
\W — Non-word character
\d — A digit
\D — A non-digit
character
\s — Whitespace character
\S — Non-whitespace
character
\b — Find a match at the
beginning/end of a word
\B — A match not at the
beginning/end of a word
\0 — NUL character
\f — Form feed character
\v — Vertical tab
character
\xxx — The character specified by
an octal number xxx
\xdd — Character specified by a
hexadecimal number dd
\uxxxx — The Unicode character
specified by a hexadecimal
number XXXX
n+ — Matches any string that
contains at least one n
n* — Any string that contains
zero or more occurrences of
n
n? — A string that contains
zero or one occurrence of
n
n{X} — String that contains a
sequence of X n’s
n{X,Y} — Strings that contain a
sequence of X to Y n’s
n{X,} — Matches any string that
contains a sequence of at
least X n’s
n$ — Any string with n at the
end of it
^n — String with n at the
beginning of it
?=n — Any string that is
followed by a specific string
n
?!n — String that is not
followed by a specific string
ni
MAX_VALUE — The maximum numeric value
representable in
JavaScript
MIN_VALUE — Smallest positive numeric
value representable in
JavaScript
NaN — The “Not-a-Number”
value
NEGATIVE_INFINITY — The negative Infinity
value
POSITIVE_INFINITY — Positive Infinity
value
toExponential() — Returns the string with a
rounded number written as
exponential notation
toFixed() — Returns the string of a
number with a specified number
of decimals
toPrecision() — String of a number written
with a specified length
toString() — Returns a number as a
string
valueOf() — Returns a number as a
number
E — Euler’s number
LN2 — The natural logarithm of
2
LN10 — Natural logarithm of
10
LOG2E — Base 2 logarithm of
E
LOG10E — Base 10 logarithm of
E
PI — The number PI
SQRT1_2 — Square root of 1/2
SQRT2 — The square root of 2
abs(x) — Returns the absolute
(positive) value of x
acos(x) — The arccosine of x, in
radians
asin(x) — Arcsine of x, in
radians
atan(x) — The arctangent of x as a
numeric value
atan2(y,x) — Arctangent of the quotient
of its arguments
ceil(x) — Value of x rounded up to
its nearest integer
cos(x) — The cosine of x (x is in
radians)
exp(x) — Value of Ex
floor(x) — The value of x rounded
down to its nearest
integer
log(x) — The natural logarithm
(base E) of x
max(x,y,z,...,n) — Returns the number with
the highest value
min(x,y,z,...,n) — Same for the number with
the lowest value
pow(x,y) — X to the power of y
random() — Returns a random number
between 0 and 1
round(x) — The value of x rounded to
its nearest integer
sin(x) — The sine of x (x is in
radians)
sqrt(x) — Square root of x
tan(x) — The tangent of an
angle
Date() — Creates a new date object
with the current date and
time
Date(2017, 5, 21, 3, 23, 10,
0) — Create a custom date
object. The numbers represent
a year, month, day, hour,
minutes, seconds,
milliseconds. You can omit
anything you want except for a
year and month.
Date("2017-06-23") — Date declaration as a
string
getDate() — Get the day of the month
as a number (1-31)
getDay() — The weekday as a number
(0-6)
getFullYear() — Year as a four-digit
number (yyyy)
getHours() — Get the hour (0-23)
getMilliseconds() — The millisecond
(0-999)
getMinutes() — Get the minute
(0-59)
getMonth() — Month as a number
(0-11)
getSeconds() — Get the second
(0-59)
getTime() — Get the milliseconds since
January 1, 1970
getUTCDate() — The day (date) of the
month in the specified date
according to universal time
(also available for day,
month, full year, hours,
minutes etc.)
parse — Parses a string
representation of a date and
returns the number of
milliseconds since January 1,
1970
setDate() — Set the day as a number
(1-31)
setFullYear() — Sets the year (optionally
month and day)
setHours() — Set the hour (0-23)
setMilliseconds() — Set milliseconds
(0-999)
setMinutes() — Sets the minutes
(0-59)
setMonth() — Set the month (0-11)
setSeconds() — Sets the seconds
(0-59)
setTime() — Set the time (milliseconds
since January 1, 1970)
setUTCDate() — Sets the day of the month
for a specified date according
to universal time (also
available for day, month, full
year, hours, minutes
etc.)
attributes — Returns a live collection
of all attributes registered
to an element
baseURI — Provides the absolute base
URL of an HTML element
childNodes — Gives a collection of an
element’s child nodes
firstChild — Returns the first child
node of an element
lastChild — The last child node of an
element
nextSibling — Gives you the next node at
the same node tree level
nodeName
—Returns the name of a
node
nodeType — Returns the type of a
node
nodeValue — Sets or returns the value
of a node
ownerDocument — The top-level document
object for this node
parentNode — Returns the parent node of
an element
previousSibling — Returns the node
immediately preceding the
current one
textContent — Sets or returns the
textual content of a node and
its descendants
appendChild() — Adds a new child node to
an element as the last child
node
cloneNode() — Clones an HTML
element
compareDocumentPosition() — Compares the document
position of two elements
getFeature() — Returns an object which
implements the APIs of a
specified feature
hasAttributes() — Returns true if an element
has any attributes, otherwise
false
hasChildNodes() — Returns true if an element
has any child nodes, otherwise
false
insertBefore() — Inserts a new child node
before a specified, existing
child node
isDefaultNamespace() — Returns true if a
specified namespaceURI is the
default, otherwise false
isEqualNode() — Checks if two elements are
equal
isSameNode() — Checks if two elements are
the same node
isSupported() — Returns true if a
specified feature is supported
on the element
lookupNamespaceURI() — Returns the namespace URI
associated with a given
node
lookupPrefix() — Returns a DOMString
containing the prefix for a
given namespace URI if
present
normalize() — Joins adjacent text nodes
and removes empty text nodes
in an element
removeChild() — Removes a child node from
an element
replaceChild() — Replaces a child node in
an element
getAttribute() — Returns the specified
attribute value of an element
node
getAttributeNS() — Returns string value of
the attribute with the
specified namespace and
name
getAttributeNode() — Gets the specified
attribute node
getAttributeNodeNS() — Returns the attribute node
for the attribute with the
given namespace and name
getElementsByTagName() — Provides a collection of
all child elements with the
specified tag name
getElementsByTagNameNS() — Returns a live
HTMLCollection of elements
with a certain tag name
belonging to the given
namespace
hasAttribute() — Returns true if an element
has any attributes, otherwise
false
hasAttributeNS() — Provides a true/false
value indicating whether the
current element in a given
namespace has the specified
attribute
removeAttribute() — Removes a specified
attribute from an
element
removeAttributeNS() — Removes the specified
attribute from an element
within a certain
namespace
removeAttributeNode() — Takes away a specified
attribute node and returns the
removed node
setAttribute() — Sets or changes the
specified attribute to a
specified value
setAttributeNS() — Adds a new attribute or
changes the value of an
attribute with the given
namespace and name
setAttributeNode() — Sets or changes the
specified attribute node
setAttributeNodeNS() — Adds a new namespaced
attribute node to an
element
closed — Checks whether a window
has been closed or not and
returns true or false
defaultStatus — Sets or returns the
default text in the status bar
of a window
document — Returns the document
object for the window
frames — Returns all <iframe>
elements in the current
window
history — Provides the History
object for the window
innerHeight — The inner height of a
window’s content area
innerWidth — The inner width of the
content area
length — Find out the number of <iframe>
elements in the window
location — Returns the location
object for the window
name — Sets or returns the name
of a window
navigator — Returns the Navigator
object for the window
opener — Returns a reference to the
window that created the
window
outerHeight — The outer height of a
window, including
toolbars/scrollbars
outerWidth — The outer width of a
window, including
toolbars/scrollbars
pageXOffset — Number of pixels the
current document has been
scrolled horizontally
pageYOffset — Number of pixels the
document has been scrolled
vertically
parent — The parent window of the
current window
screen — Returns the Screen object
for the window
screenLeft — The horizontal coordinate
of the window (relative to the
screen)
screenTop — The vertical coordinate of
the window
screenX — Same as screenLeft
but needed for some
browsers
screenY — Same as screenTop
but needed for some
browsers
self — Returns the current
window
status — Sets or returns the text
in the status bar of a
window
top — Returns the topmost
browser window
alert() — Displays an alert box with
a message and an OK
button
blur() — Removes focus from the
current window
clearInterval() — Clears a timer set with setInterval()
clearTimeout() — Clears a timer set with setTimeout()
close() — Closes the current
window
confirm() — Displays a dialogue box
with a message and an OK
and Cancel
button
focus() — Sets focus to the current
window
moveBy() — Moves a window relative to
its current position
moveTo() — Moves a window to a
specified position
open() — Opens a new browser
window
print() — Prints the content of the
current window
prompt() — Displays a dialogue box
that prompts the visitor for
input
resizeBy() — Resizes the window by the
specified number of
pixels
resizeTo() — Resizes the window to a
specified width and
height
scrollBy() — Scrolls the document by a
specified number of
pixels
scrollTo() — Scrolls the document to
specified coordinates
setInterval() — Calls a function or
evaluates an expression at
specified intervals
setTimeout() — Calls a function or
evaluates an expression after
a specified interval
stop() — Stops the window from
loading
availHeight — Returns the height of the
screen (excluding the Windows
Taskbar)
availWidth — Returns the width of the
screen (excluding the Windows
Taskbar)
colorDepth — Returns the bit depth of
the color palette for
displaying images
height — The total height of the
screen
pixelDepth — The color resolution of
the screen in bits per
pixel
width — The total width of the
screen
onclick — The event occurs when the
user clicks on an
element
oncontextmenu — User right-clicks on an
element to open a context
menu
ondblclick — The user double-clicks on
an element
onmousedown — User presses a mouse
button over an element
onmouseenter — The pointer moves onto an
element
onmouseleave — Pointer moves out of an
element
onmousemove — The pointer is moving
while it is over an
element
onmouseover — When the pointer is moved
onto an element or one of its
children
onmouseout — User moves the mouse
pointer out of an element or
one of its children
onmouseup — The user releases a mouse
button while over an
element
onkeydown — When the user is pressing
a key down
onkeypress — The moment the user starts
pressing a key
onkeyup — The user releases a
key
onabort — The loading of a media is
aborted
onbeforeunload — Event occurs before the
document is about to be
unloaded
onerror — An error occurs while
loading an external file
onhashchange — There have been changes to
the anchor part of a URL
onload — When an object has
loaded
onpagehide — The user navigates away
from a webpage
onpageshow — When the user navigates to
a webpage
onresize — The document view is
resized
onscroll — An element’s scrollbar is
being scrolled
onunload — Event occurs when a page
has unloaded
onblur — When an element loses
focus
onchange — The content of a form
element changes (for <input>, <select>
and <textarea>)
onfocus — An element gets
focus
onfocusin — When an element is about
to get focus
onfocusout — The element is about to
lose focus
oninput — User input on an
element
oninvalid — An element is
invalid
onreset — A form is reset
onsearch — The user writes something
in a search field (for <input="search">)
onselect — The user selects some text
(for <input>
and <textarea>)
onsubmit — A form is submitted
ondrag — An element is
dragged
ondragend — The user has finished
dragging the element
ondragenter — The dragged element enters
a drop target
ondragleave — A dragged element leaves
the drop target
ondragover — The dragged element is on
top of the drop target
ondragstart — User starts to drag an
element
ondrop — Dragged element is dropped
on the drop target
oncopy — User copies the content of
an element
oncut — The user cuts an element’s
content
onpaste — A user pastes the content
in an element
onabort — Media loading is
aborted
oncanplay — The browser can start
playing media (e.g. a file has
buffered enough)
oncanplaythrough — The browser can play
through media without
stopping
ondurationchange — The duration of the media
changes
onended — The media has reached its
end
onerror — Happens when an error
occurs while loading an
external file
onloadeddata — Media data is loaded
onloadedmetadata — Metadata (like dimensions
and duration) are loaded
onloadstart — The browser starts looking
for specified media
onpause — Media is paused either by
the user or
automatically
onplay — The media has been started
or is no longer paused
onplaying — Media is playing after
having been paused or stopped
for buffering
onprogress — The browser is in the
process of downloading the
media
onratechange — The playing speed of the
media changes
onseeked — User is finished
moving/skipping to a new
position in the media
onseeking — The user starts
moving/skipping
onstalled — The browser is trying to
load the media but it is not
available
onsuspend — The browser is
intentionally not loading
media
ontimeupdate — The playing position has
changed (e.g. because of fast
forward)
onvolumechange — Media volume has changed
(including mute)
onwaiting — Media paused but expected
to resume (for example,
buffering)
animationend — A CSS animation is
complete
animationiteration — CSS animation is
repeated
animationstart — CSS animation has
started
transitionend — Fired when a CSS
transition has completed
onmessage — A message is received
through the event source
onoffline — The browser starts to work
offline
ononline — The browser starts to work
online
onpopstate — When the window’s history
changes
onshow — A <menu>
element is shown as a context
menu
onstorage — A Web Storage area is
updated
ontoggle — The user opens or closes
the <details>
element
onwheel — Mouse wheel rolls up or
down over an element
ontouchcancel — Screen-touch is
interrupted
ontouchend — User’s finger is removed
from a touch-screen
ontouchmove — A finger is dragged across
the screen
ontouchstart — A finger is placed on the
touch-screen
try — Lets you define a block of
code to test for errors
catch — Set up a block of code to
execute in case of an
error
throw — Create custom error
messages instead of the
standard JavaScript
errors
finally — Lets you execute code,
after try and catch,
regardless of the result
name — Sets or returns the error
name
message — Sets or returns an error
message in a string from
EvalError — An error has occurred in
the eval()
function
RangeError — A number is “out of
range”
ReferenceError — An illegal reference has
occurred
SyntaxError — A syntax error has
occurred
TypeError — A type error has
occurred
URIError — An encodeURI()
error has occurred
Boolean(), Number(), and String()
functions.
null or undefined has a
toString()
method.
n.toString(2);
n.toString(8);
n.toString(16);
let n = 123456.789;
n.toFixed(0)
n.toFixed(5)
n.toExponential(3)
n.toPrecision(7)
n.toPrecision(10)
parseInt("3 blind
mice")
parseFloat(" 3.14
meters")
parseInt("-12.34")
parseInt("0xFF")
Boolean(), Number(), and String()
functions.
null or undefined has a
toString()
method.
n.toString(2);
n.toString(8);
n.toString(16);
let n = 123456.789;
n.toFixed(0)
n.toFixed(5)
n.toExponential(3)
n.toPrecision(7)
n.toPrecision(10)
parseInt("3 blind
mice")
parseFloat(" 3.14
meters")
parseInt("-12.34")
parseInt("0xFF")
parseInt("0xff")
parseInt("-0XFF")
parseInt("0.1")
parseInt(".1")
parseFloat("$72.47")
parseInt("11", 2)
parseInt("ff", 16)
parseInt("077", 8)
x + ""
String(x)
+x
Number(x)
x-0
Number(x)
!!x
Boolean(x)
let [x,y] = [1,2];
[x,y] = [x + 1,y + 1];
[x,y] = [y,x];
let [r,theta] = toPolar(1.0,
1.0);
let o = { x: 1, y: 2 };
Object.entries()
method returns an array of a given
object's own enumerable
string-keyed property [key, value]
pairs, in the same order as that
provided by a for...in
loop. (The only important difference
is that a for...in
loop enumerates properties in the
prototype chain as well).
[,x,,y] = [1,2,3,4];
(...) before the last variable name on the
left-hand side
let [x, ...y] = [1,2,3,4];
let [first, ...rest] =
"Hello";
let transparent = {r: 0.0, g: 0.0, b:
0.0, a: 1.0};
let {r, g, b} = transparent;
const {sin, cos, tan} = Math;
null and undefined are the only two values that do not
have properties. In a regular property
access expression using . or [], you
get a TypeError
if the expression on the left
evaluates to null or undefined. You can use ?.
and ?.[]
syntax to guard against errors of this
type.
?.()
instead of ().
new ?.()
invocation syntax, if the expression
to the left of the ?.
evaluates to null
or undefined, then the entire invocation
expression evaluates to undefined and no exception is thrown.
?.(),
knowing that invocation will only
happen if there is actually a value to
be invoked
x++
is not always the same as x = x + 1.The ++
operator never performs string
concatenation: it always converts its
operand to a number and increments it.
If x is the string "1", ++x
is the number 2, but
x + 1
is the string "11".
NaN value is never equal to any other
value, including itself! To check
whether a value x
is NaN, use x !== , or the global isNaN()
function.
eval("3+2")
eval()
for an entire website.
??
evaluates to its first defined
operand: if its left operand is not null
and not undefined, it returns that value.
a ?? b
is equivalent to (a !== null && a !==
undefined) ? a : b
??
is a useful alternative to ||.
The problem with this idiomatic use is
that zero, the empty string, and false
are all falsy values that may be perfectly valid in
some circumstances. In this code
example, if maxWidth is zero, that value will be ignored.
But if we change the ||
operator to ??, we end up with an expression where
zero is a valid value.
let max = maxWidth ||
preferences.maxWidth || 500;
let max = maxWidth ??
preferences.maxWidth ?? 500;
void
operator makes sense only if the
operand has side effects.
let counter = 0;
const increment = () => void
counter++;
increment()
counter
for/of
loop works with iterable objects.
Arrays, strings, sets, and maps are
iterable.
for/of
on a regular object throws a TypeError
at runtime.
for/in
loop.
for/of
can be used on objects with Object.entries
property, but it will not pick
properties from object’s
prototype.
for/in
loop works with any object after the in.
for/in
loop does not actually enumerate all
properties of an object. It does not
enumerate properties whose names are
symbols. And of the properties whose
names are strings, it only loops over
the enumerableproperties.
with statement is forbidden in strict mode
and should be considered deprecated in
non-strict mode: avoid using it
whenever possible.
with statement is not allowed in strict
mode.
ReferenceError is thrown if you assign a value to an
identifier that is not a declared
variable, function, function
parameter, catch clause parameter, or
property of the global object.
this value of undefined. (In non-strict
mode, functions invoked as functions
are always passed the global object as
their this value.)
call() or apply()
, the this value is exactly the value passed as
the first argument to call()
or apply(). (In non-strict mode, null and undefined values are replaced with the global
object and non-object values are
converted to objects.)
TypeError. (In non-strict mode, these attempts
fail silently.)
eval() cannot declare variables or define
functions in the caller’s scope as it
can in non-strict mode. Instead,
variable and function definitions live
in a new scope created for the eval(). This scope is discarded when the eval()
returns.
SyntaxError is thrown if the delete operator is followed by an
unqualified identifier such as a
variable, function, or function
parameter. (In non-strict mode, such a delete expression does nothing and evaluates
to false.)
TypeError. (In non-strict mode, the attempt
fails and the delete expression
evaluates to false.)
writable attribute specifies whether the value
of the property can be set.
enumerable attribute specifies whether the
property name is returned by a for/in
loop.
configurable attribute specifies whether the
property can be deleted and whether
its attributes can be altered.
Object.prototype.
new keyword and a constructor invocation
use the value of the prototype
property of the constructor function
as their prototype.
new Object()
inherits from Object.prototype, just as the object created by {}
does. Similarly, the object created by new Array()
uses Array.prototype
as its prototype, and the object
created by
new Date()
uses Date.prototype
as its prototype.
prototype property. It is these objects with
prototype properties that define the
prototypes for all the other
objects.
Object.prototype.
Date.prototype
inherits properties from Object.prototype, so a Date object created by new Date()
inherits properties from both Date.prototype
and Object.prototype. This linked series of prototype
objects is known as a prototype
chain.
new
keyword, and with the Object.create()
function.
let empty = {};
let point = { x: 0, y: 0 };
new
let o = new Object();
let a = new Array();
let d = new Date();
let r = new Map();
Object.create
let o3 =
Object.create(Object.prototype);
Object.create
to guard against accidental
modifications:
o
object
let o = {};
o.x = 1;
let p = Object.create(o);
p.y = 2;
let q = Object.create(p);
q.z = 3;
x
and y
available on object q
q.x + q.y
surname = book && book.author
&& book.author.surname;
let surname =
book?.author?.surname;
delete
operator only deletes own properties,
not inherited ones. (To delete an
inherited property, you must delete it
from the prototype object in which it
is defined. Doing this affects every
object that inherits from that
prototype.)
delete
does not remove properties that have a configurable attribute of false.
delete Object.prototype
var x = 1;
delete globalThis.x
this property
function f() {}
delete globalThis.f
globalThis.x = 1;
delete globalThis.x
in
operator, with the hasOwnProperty()
and propertyIsEnumerable()
methods, or simply by querying the
property
!= undefined).
let o = { x: 1 };
"x" in o
o.x !== undefined
"y" in o
o.y !== undefined
"toString" in o
toString property
o.toString !== undefined
in
can distinguish between properties
that do not exist and properties that
exist but have been set to undefined.
let o = { x: 1 };
o.hasOwnProperty("x")
o.hasOwnProperty("y")
o.hasOwnProperty("toString")
propertyIsEnumerable()
returns true only if the named
property is an own property and its enumerable
attribute is true.
let o = { x: 1 };
o.propertyIsEnumerable("x")
o.propertyIsEnumerable("toString")
Object.prototype.propertyIsEnumerable("toString")
for/in, you can add an explicit check
inside the loop body:
Object.keys()
returns an array of the names of the
enumerable own properties of an
object. It does not include
non-enumerable properties, inherited
properties, or properties whose name
is a Symbol.
Object.getOwnPropertyNames()
works like Object.keys() but returns an array of the names of
nonenumerable own properties as
well.
Object.getOwnPropertySymbols()
returns own properties whose names are
Symbols, whether or not they are
enumerable.
Reflect.ownKeys()
returns all own property names, both
enumerable and non-enumerable, and
both string and Symbol.
Object.assign()
naively will not do what you
want:
o = Object.assign({}, defaults,
o);
o = {...defaults, ...o};
JSON.stringify()
and
JSON.parse()
serialize and restore JavaScript
objects.
let o = {x: 1, y: {z: [false, null,
""]}};
let s = JSON.stringify(o);
let p = JSON.parse(s);
toString(), valueOf(),
loLocaleString(), toJSON()
let s = { x: 1, y: 1
}.toString();
let x = 1, y = 2;
let o = { x, y };
const PROPERTY_NAME =
"p1";
function computePropertyName() {
return "p" + 2; }
let position = { x: 0, y: 0 };
let dimensions = { width: 100,
height: 75 };
let rect = { ...position,
...dimensions };
rect.x + rect.y + rect.width +
rect.height
weirdMethods["method With
Spaces"](1)
weirdMethods[METHOD_NAME](1)
weirdMethods[symbol](1)
Array()
constructor
Array.of()
and Array.from()
factory methods
let empty = [];
let primes = [2, 3, 5, 7, 11];
let misc = [ 1.1, true,
"a", ];
let b = [[1, {x: 1, y: 2}], [2, {x:
3, y: 4}]];
let count = [1,,3];
let undefs = [,,];
[,,]
has a length of 2, not 3.
let a = [1, 2, 3];
let b = [0, ...a, 4];
let original = [1,2,3];
let copy = [...original];
let digits =
[..."0123456789ABCDEF"];
let letters = [..."hello
world"];
[...new Set(letters)]
Array()
constructor function is invoked with
one numeric argument, it uses that
argument as an array length. But when
invoked with more than one numeric
argument, it treats those arguments as
elements for the array to be created.
This means that the Array()
constructor cannot be used to create
an array with a single numeric
element.
Array.of()
Array.of(10)
Array.of(1,2,3)
let copy =
Array.from(original);
Array.from()
is also important because it defines a
way to make a true-array copy of an
array-like object. Array-like objects
are non-array objects that have a
numeric length property and have
values stored with properties whose
names happen to be integers.
let truearray =
Array.from(arraylike);
Array.from()
also accepts an optional second
argument. If you pass a function as
the second argument, then as the new
array is being built, each element
from the source object will be passed
to the function you specify, and the
return value of the function will be
stored in the array instead of the
original value.
length
property for you.
length
property as needed.
a[-1.23] = true;
a["1000"] = 0;
a[1.000] = 1;
undefined.
Array()
constructor or simply by assigning to
an array index larger than the current
array length.
a[1000] = 0;
delete
operator.
[1,,3]), the resulting array is sparse, and
the omitted elements simply do not
exist
n
smaller than its current value, any
array elements whose index is greater
than or equal to n are deleted from
the array.
a = [1,2,3,4,5];
a.length = 3;
a.length = 0;
a.length = 5;
new Array(5)
let a = [];
a[0] = "zero";
a[1] = "one";
push()
method to add one or more values to
the end of an array.
unshift()
method to insert a value at the
beginning of an array, shifting the
existing array elements to higher
indexes.
pop()
method is the opposite of push(): it removes the last element of the
array and returns it, reducing the
length of an array by 1.
shift()
method removes and returns the first
element of the array, reducing the
length by 1 and shifting all elements
down to an index one lower than their
current index.
let a = [1,2,3];
delete a[2];
2 in a
a.length
for/ofloop
undefined
for any array elements that do not
exist.
for/of
loop for an array and need to know the
index of each array element, use the entries()
method of the array
forEach(). This is not a new form of the for
loop, but an array method that offers
a functional approach to array
iteration.
for
loop.
let table = new Array(10);
let data = [1,2,3,4,5], sum =
0;
let a = [1, 2, 3];
a.map(x => x*x)
let a = [5, 4, 3, 2, 1];
a.filter(x => x < 3)
a.filter((x,i) => i % 2 ===
0)
let a = [1,2,3,4,5];
a.findIndex(x => x === 3)
a.find(x => x % 5 === 0)
a.find(x => x % 7 === 0)
let a = [1,2,3,4,5];
a.every(x => x < 10)
a.some(x => x % 2 === 0)
a.some(isNaN)
et a = [1,2,3,4,5];
a.reduce((x,y) => x+y, 0)
a.reduce((x,y) => x*y, 1)
a.reduce((x,y) => (x > y) ? x :
y)
map()
returns a new array: it does not
modify the array it is invoked on. If
that array is sparse, your function
will not be called for the missing
elements, but the returned array will
be sparse in the same way as the
original array: it will have the same
length and the same missing
elements.
let dense = sparse.filter(() =>
true);
a = a.filter(x => x !== undefined
&& x !== null);
filter(), however,
find()
and findIndex()
stop iterating the first time the
predicate finds an element. When that
happens, find()
returns the matching element, and findIndex()
returns the index of the matching
element. If no matching element is
found,
find()
returns undefined
and
findIndex()returns -1.
reduce()
with no initial value, it uses the
first element of the array as the
initial value.
reduceRight()
works just like reduce(), except that it processes the array
from highest index to lowest
(right-to-left), rather than from
lowest to highest. You might want to
do this if the reduction operation has
right-to-left associativity
flat()
and flatMap()
[1, [2, 3]].flat()
[1, [2, [3]]].flat()
let a = [1, [2, [3, [4]]]];
a.flat(1)
a.flat(2)
a.flat(3)
a.flat(4)
let phrases = ["hello
world", "the definitive
guide"];
let words = phrases.flatMap(phrase
=> phrase.split("
"));
a.flatMap(f)
is the same as (but more efficient
than) a.map(f).flat():
let a = [1,2,3];
a.concat(4, 5)
a.concat([4,5],[6,7])
push()
and
pop()
methods allow you to work with arrays
as if they were stacks. The push()
method appends one or more new
elements to the end of an array and
returns the new length of the
array.
unshift()
and shift()
methods behave much like push()
and
pop(), except that they insert and remove
elements from the beginning of an
array rather than from the end.
push()
to add elements at the end of an array
and shift()
to remove them from the start of the
array. Note differences in unshift with single and multiple
values.
let a = [];
a.unshift(1)
a.unshift(2)
a = [];
a.unshift(1,2)
slice(), splice(), fill(), and copyWithin()
let a = [1,2,3,4,5];
a.slice(0,3);
a.slice(3);
a.slice(1,-1);
a.slice(-3,-2);
let a = [1,2,3,4,5,6,7,8];
a.splice(4)
a.splice(1,2)
a.splice(1,1)
let a = [1,2,3,4,5];
a.splice(2,0,"a","b")
a.splice(2,2,[1,2],3)
a
is now [1,2,3,4]
let a = new Array(5);
a.fill(0)
a.fill(9, 1)
a.fill(8, 2, -1)
let a = [1,2,3,4,5];
a.copyWithin(1)
a.copyWithin(2, 3, 5)
a.copyWithin(0, -2)
splice()
is a general-purpose method for
inserting or removing elements from an
array.
splice()
can delete elements from an array,
insert new elements into an array, or
perform both operations at the same
time.
splice()
specifies the array position at which
the insertion and/or deletion is to
begin. The second argument specifies
the number of elements that should be
deleted from (spliced out of) the
array.
concat(), splice()
inserts arrays themselves, not the
elements of those arrays.
copyWithin()
copies a slice of an array to a new
position within the array. It modifies
the array in place and returns the
modified array, but it will not change
the length of the array.
let a = [0,1,2,1,0];
a.indexOf(1)
a.lastIndexOf(1)
a.indexOf(3)
let a = [33, 4, 1111, 222];
a.sort();
a.sort((a,b) => a - b);
[1111, 222, 33, 4];
[4, 33, 222, 1111]
let a = [1,2,3];
a.reverse();
indexOf()
and lastIndexOf()
compare their argument to the array
elements using the equivalent of the
=== operator. If your array contains
objects instead of primitive values,
these methods check to see if two
references both refer to exactly the
same object. If you want to actually
look at the content of an object, try
using the find()
method with your own custom predicate
function instead.
indexOf()
and lastIndexOf()
take an optional second argument that
specifies the array index at which to
begin the search. Negative values are
allowed for the second argument and
are treated as an offset from the end
of the array.
indexOf()
will not detect the NaN value in an
array, but includes()
will
sort()
is called with no arguments, it sorts
the array elements in alphabetical
order. To sort an array into some
order other than alphabetical, you
must pass a comparison function as an
argument to sort().
join()
method converts all the elements of an
array to strings and concatenates
them, returning the resulting
string.
let a = [1, 2, 3];
a.join()
a.join(" ")
a.join("")
let b = new Array(10);
b.join("-")
toString()
method. For an array, this method
works just like the join()
method with no arguments:
[1,2,3].toString()
["a", "b",
"c"].toString()
[1,
[2,"c"]].toString()
Array.isArray([])
Array.isArray({})
length
property and corresponding
non-negative integer properties as a
kind of array.
Array.prototype, you cannot invoke array methods on
them directly. You can invoke them
indirectly using the Function.call
method.
let a = {"0":
"a", "1":
"b", "2":
"c", length: 3};
Array.prototype.join.call(a,
"+")
Array.prototype.join.call("JavaScript",
" ")
Array.prototype.map.call(a, x =>
x.toUpperCase())
Array.from(a)
let s = "test";
s.charAt(0)
s[1]
this
keyword.
const square = function(x) { return
x*x; };
[3,2,1].sort(function(a,b) { return a
- b; });
let tensquared = (function(x) {return
x*x;}(10));
const sum = (x, y) => { return x +
y; };
const sum = (x, y) => x + y;
return
const polynomial = x => x*x + 2*x
+ 3;
const constantFunc = () =>
42;
const f = x => { return { value: x
}; };
const g = x => ({ value: x
});
const h = x => { value: x };
const i = x => { v: x, w: x
};
this
keyword from the environment in which
they are defined rather than defining
their own invocation context as
functions defined in other ways
do.
this
value) is the global object. In strict
mode, however, the invocation context
is undefined.
const strict = (function() { return
!this; }())
prototypeproperty of the constructor.
call()
and apply(), invoke the function indirectly.
Both methods allow you to explicitly
specify the this value for the invocation, which means
you can invoke any function as a
method of any object, even if it is
not actually a method of that
object.
undefined.
undefined.
arguments
refers to the Arguments object for
that invocation.
sum([1,2,3])
sum(1, 2, 3);
TypeError: 1 is not iterable
sum([1,2,"3"]);
TypeError: element 2 is not a number
let s = square;
square(4)
s(4)
let o = {square: function(x) { return
x*x; }};
let y = o.square(16);
let a = [x => x*x, 20];
a[0](a[1])
a[0]
accesses first element of the array,
which is "x => x*x", (a[1])
passes parameter, which is 20.
let i = operate(add, operate(add, 2,
3), operate(multiply, 4,5));
(2+3) + (4*5):
operate2("add",
"hello",
operate2("add", "
", "world"))
operate2("pow", 10,
2)
chunkNamespace.
checkscope()
let s = checkscope()();
uniqueInteger()
uniqueInteger()
uniqueInteger.
let c = counter(), d =
counter();
c.count()
d.count()
c.reset();
c.count()
d.count()
let c = counter(1000);
c.count
c.count
c.count = 2000;
c.count
c.count = 2000;
let o = {};
addPrivateProperty(o,
"Name", x => typeof x ===
"string");
o.setName("Frank");
o.getName()
o.setName(0);
call()
and apply()
allow you to indirectly invoke a
function as if it were a method of
some other object. The first argument
to both call()
and apply()
is the object on which the function is
to be invoked; this argument is the
invocation context and becomes the
value of the this
keyword within the body of the
function.
f()
as a method of the object o (passing
no arguments),
f.call(o);
f.apply(o);
f()
and invoke it as if it were a method
of the object o,
apply()
method is like the call()
method, except that the arguments to
be passed to the function are
specified as an array:
trace() function defined uses the apply() method instead of a spread operator,
and by doing that, it is able to
invoke the wrapped method with the
same arguments and the same this value
as the wrapper method
bind()
is to bind a function to an
object.
function f(y) { return this.x + y;
}
let o = { x: 1 };
let g = f.bind(o);
g(2)
let p = { x: 10, g };
p.g(2)
bind()
is to make non-arrow functions behave
like arrow functions.
currying.
let sum = (x,y) => x + y;
let succ = sum.bind(null, 1);
succ(2)
toString()
method return the complete source code
for the function
eval()
that defines new variables and
functions in its own private scope.
You will probably never need to use
this constructor in your code.
const even = x => x % 2 ===
0;
const odd = not(even);
[1,1,3,5,5].every(odd)
const sum = (x,y) => x+y;
const square = x => x*x;
compose(square, sum)(2,3)
Object.create()
to create objects that inherit from
it, we have defined a JavaScript
class.
let r = range(1,3);
r.includes(2)
r.toString()
[...r]
prototype
property of the constructor is used as
the prototype of the new object.
prototype
property. It is function objects that
have a prototype
property.
let r = new Range(1,3);
r.includes(2)
r.toString()
[...r]
Range() constructor is invoked with new, it does not have to call Object.create()
or take any action to create a new
object.
range.methods. This was a convenient and
descriptive name, but arbitrary. In
the second example, the prototype is Range.prototype, and this name is mandatory.
Range()
constructor automatically uses Range.prototype
as the prototype of the new Range
object.
instanceof
operator is not checking whether r
was actually initialized by the Range
constructor. Instead, it is checking
whether r
inherits from Range.prototype.
isPrototypeOf()
method
prototype
property. The value of this property
is an object that has a single,
non-enumerable constructor
property.
constructor
property is the function object
let o = new F();
o.constructor === F
let r = new Range(1,3);
r.includes(2)
r.toString()
[...r]
extends
keyword with the class keyword:
let Square = class { constructor(x) {
this.area = x * x; } };
new Square(3).area
static
method within a class body by
prefixing the method declaration with
the static
keyword. Static methods are defined as
properties of the constructor function
rather than properties of the
prototype object.
Range.parse(), not Range.prototype.parse(), and you must invoke it through the
constructor, not through an
instance:
static
keyword for fields.
Span
prototype inherits from the Range
Range.prototype.constructor, so we define our own constructor
property:
Span
overrides the toString()
method
Span.prototype.toString = function()
{
return `(${this.from}... +${this.to -
this.from})`;
};
let a = new EZArray();
a instanceof EZArray
a instanceof Array
a.push(1,2,3,4);
a.pop()
a.first
a.last
Array.isArray(a)
EZArray.isArray(a)
Array.prototype.isPrototypeOf(EZArray.prototype
Array.isPrototypeOf(EZArray)
super
keyword to invoke the constructor and
methods of the superclass
this
keyword in your constructor until
after you have invoked the superclass
constructor with super(). This enforces a rule that
superclasses get to initialize
themselves before subclasses do.
#keyType
and #valueType
so that they could not be altered from
the outside.
default
instead of export
mean()
and
stddev()
functions through the stats object,
invoking them as stats.mean()
and stats.stddev().
Set()
constructor need not be an array: any
iterable object (including other Set
objects) is allowed.
add()
method takes a single argument; if you
pass an array, it adds the array
itself to the set, not the individual
array elements. add()
always returns the set it is invoked
on, however, so if you want to add
multiple values to a set, you can used
chained method calls like.
let oneDigitPrimes = new
Set([2,3,5,7]);
oneDigitPrimes.has(2)
for/of
loop to enumerate all of the elements
of a set:
[...oneDigitPrimes]
forEach()
method
has()
to check whether a map includes the
specified key; use delete()
to remove a key (and its associated
value) from the map; use clear()
to remove all key/value pairs from the
map; and use the size property to find
out how many keys a map
contains.
set()
method of Map can be chained.
null, undefined, and NaN, as well as reference types like
objects and arrays.
let m = new Map();
m.set({}, 1);
m.set({}, 2);
m.get({})
m.set(m, undefined);
m.has(m)
m.get(m)
let m = new Map([["x", 1],
["y", 2]]);
[...m]
for(let [key, value] of m)
{...}
keys()
and values()
methods: these return iterable objects
that iterate keys and values, in
insertion order. (The entries()
method returns an iterable object that
iterates key/value pairs, but this is
exactly the same as iterating the map
directly.)
forEach()
WeakMap class is a variant (but not an actual
subclass) of the Map class that does
not prevent its key values from being
garbage collected.
WeakMap keys must be objects or arrays;
primitive values are not subject to
garbage collection and cannot be used
as keys.
get(), set(), has(),
and delete()
methods. In particular, WeakMap
is not iterable and does not define keys(), values(),
or forEach(). If WeakMap was iterable, then its
keys would be reachable and it
wouldn’t be weak.
size
of a WeakMap could change at any time
as objects are garbage collected
ArrayBuffer
type
let ints = new Int16Array(10);
ints.fill(3).map(x=>x*x).join("")
push(), pop(), unshift(),
shift(),
and splice()) are not implemented for typed
arrays. Methods that alter the
contents of an array without changing
the length (such as sort(), reverse(), and fill()) are implemented.
DataView
class, which defines methods for
reading and writing values from an ArrayBuffer
with explicitly specified byte
ordering. Refer to book for more
examples.
RegExp()
constructor, of course, but they are
more often created using a special
literal syntax.
^ $ . * + ? = ! : | \ / ( ) [ ] { }. Other punctuation characters, such as
quotation marks and @, do not have
special meaning and simply match
themselves literally in a regular
expression.
RegExp()
constructor, keep in mind that any
backslashes in your regular expression
need to be doubled, since strings also
use backslashes as an escape
character.
[...]
[^...]
.
RegExp
uses the s flag, then a period matches
any character, including line
terminators.
\w
\W
\s
\S
\d
\D
[\b]
[\s\d]
{n,m}
{n,}
{n}
?
+
??, +?, *?, or even {1,5}?.
|
/ab|cd|ef/
/\d{3}|[a-z]{4}/
/a|ab/
()
/java(script)?/
/(ab|cd)+|ef/
/[a-z]+\d+/. But suppose you only really care
about the digits at the end of each
match. If you put that part of the
pattern in parentheses
(/[a-z]+(\d+)/), you can extract the
digits from any matches you
find,
(?:...)
syntax:
"/([Jj]ava(?:[Ss]cript)?)\sis\s(fun\w*)/" \2
refers to the text matched by (fun\w*)
since (?:[Ss]cript)?)
in not remembered.
/^JavaScript$/
/\sJava\s/, which requires a space before and
after the word. But there are two
problems with this solution. First, it
does not match "Java" at the
beginning or the end of a string, but
only if it appears with space on
either side. Second, when this pattern
does find a match, the matched string
it returns has leading and trailing
spaces, which is not quite what’s
needed. So instead of matching actual
space characters with \s, match (or
anchor to) word boundaries with \b.
The resulting expression is /\bJava\b/.
\B
anchors the match to a location that
is not a word boundary. Thus, the
pattern /\B[Ss]cript/
matches "JavaScript" and
"postscript", but not
"script" or
"Scripting".
(?= and )
characters, it is a lookahead
assertion, and it specifies that the
enclosed characters must match,
without actually matching them.
/[Jj]ava([Ss]cript)?(?=\:)/
(?!, it is a negative lookahead
assertion.
match()
method and the RegExp exec()
method in important ways.
\u{...}
escape sequence for Unicode character
and also enables the \p{...} notation
for Unicode character classes.
"JavaScript".search(/script/ui)
"Python".search(/script/ui)
search()
does not support global searches; it
ignores the g
flag of its regular expression
argument.
text.replace(/javascript/gi,
"JavaScript");
let quote =
/"([^"]*)"/g;
'He said
"stop"'.replace(quote,
'«$1»')
let quote =
/"(?<quotedText>[^"]*)"/g;
'He said
"stop"'.replace(quote,
'«lt;quotedText>»')
let s = "15 times 15 is
225";
s.replace(/\d+/gu, n =>
parseInt(n).toString(16))
"7 plus 8 equals
15".match(/\d+/g)
g
flag set, match()
does not do a global search; it simply
searches for the first match. In this
nonglobal case, match()
still returns an array, but the array
elements are completely
different.
match()
returns an array a, a[0] contains the
complete match, a[1] contains the
substring that matched the first
parenthesized expression, and so
on.
let url =
/(?<protocol>\w+):\/\/(?<host>[\w.]+)\/(?<path>\S*)/;
let text = "Visit my blog at
http://www.example.com/~david";
let match = text.match(url);
match[0]
match.input
match.index
match.groups.protocol
match.groups.host
match.groups.path
match()
does, however, it returns an iterator
that yields the kind of match objects
that match() returns when used with a
non-global RegExp.
"123,456,789".split(",")
"1, 2, 3,\n4,
5".split(/\s*,\s*/)
split()
with a RegExp delimiter and the
regular expression includes capturing
groups, then the text that matches the
capturing groups will be included in
the returned array.
const htmlTag =
/<([^>]+)>/;
"Testing<br/>1,2,3".split(htmlTag)
RegExp()
constructor is useful when a regular
expression is being dynamically
created and thus cannot be represented
with the regular expression literal
syntax.
let exactMatch = /JavaScript/;
let caseInsensitive = new
RegExp(exactMatch,
"i");
exec().
lastIndex
property with the g and y flags is a
particularly awkward part of this API.
When you use these flags, you need to
be particularly careful when calling
the match(), exec(), or test()
methods because the behavior of these
methods depends on lastIndex, and the value of lastIndex
depends on what you have previously
done with the RegExp object.
lastIndex
set to 0, so exec()
always begins at the start of the
string, and if there is a match, it
will keep matching over and over. The
solution, of course, is to define the
RegExp once, and save it to a variable
so that we’re using the same RegExp
object for each iteration of the
loop.
doubleLetterWords
lastIndex
property is changed after successful
matches, and the test()
method (which is based on exec()) starts searching for a match at the
position specified by lastIndex. After matching the "pp"
in "apple", lastIndex
is 3, and so we start searching the
word "book" at position 3
and do not see the "oo" that
it contains.
toUTCString()
or
toISOString().
let century = new
Date("2100-01-01T00:00:00Z");
getDate()
and getUTCDate(). The more natural-sounding functions getDay()
and getUTCDay()
return the day-of-week (0 for Sunday
through 6 for Saturday). The
day-of-week is read-only, so there is
not a corresponding setDay()
method.
getTime()
method returns this internal value,
and the setTime()
method sets it.
let d = new Date();
d.setMonth(d.getMonth() + 3,
d.getDate() + 14);
Date.parse()
is able to parse the same strings that
the Date()
constructor can and is guaranteed to
be able to parse the output of
toISOString(), toUTCString(), and
toString().
message
and name, and a
toString()
method. Node and all modern browsers
also define a stack
property on Error objects.
EvalError, RangeError,
ReferenceError, SyntaxError,
TypeError,
and URIError.
JSON.stringify()
and JSON.parse().
JSON.stringify()
and JSON.parse(). Both functions accept an optional
second argument that allows us to
extend the JSON format.
JSON.stringify()
also takes an optional third argument.
If you would like your JSONformatted
string to be human-readable (if it is
being used as a configuration file,
for example), then you should pass
null as the second argument and pass a
number or string as the third
argument. If the third argument is a
number, then it will use that number
of spaces for each indentation level.
If the third argument is a string of
whitespace (such as '\t'),
it will use that string for each level
of indent.
JSON.stringify()
is asked to serialize a value that is
not natively supported by the JSON
format, it looks to see if that value
has a toJSON()
method, and if so, it calls that
method and then stringifies the return
value in place of the original value.
Date objects implement toJSON(): it returns the same string that toISOString()
method does.
JSON.parse().
%s, %i, %d, %f, %o, %O, or %c, then this first argument is treated
as format string, and the values of
subsequent arguments are substituted
into the string in place of the
two-character % sequences.
let url = new
URL("https://example.com/search");
url.search
url.searchParams.append("q",
"term");
url.search
url.searchParams.set("q",
"x");
url.search
url.searchParams.append("opts",
"1");
url.search
let url = new
URL("http://example.com");
let params = new
URLSearchParams();
params.append("q",
"term");
params.append("opts",
"exact");
params.toString()
url.search = params;
url.href
setTimeout()
and
setInterval()—that allow programs to ask the
browser to invoke a function after a
specified amount of time has elapsed
or to invoke the function repeatedly
at a specified interval.
setInterval()
setTimeout()
and setInterval()
return a value. If you save this value
in a variable, you can then use it
later to cancel the execution of the
function by passing it to clearTimeout()
or clearInterval().
let list = [1,2,3,4,5];
let iter =
list[Symbol.iterator]();
let head = iter.next().value;
let tail = [...iter];
Symbol.iterator
f()
to each value from the source
iterable
[...map(new Range(1,4), x =>
x*x)]
[...filter(new Range(1,10), x => x
% 2 === 0)]
function*
rather than function
next()
method causes the body of the
generator function to run from the
start (or whatever its current
position is) until it reaches a yield
statement.
yield
statement becomes the value returned
by the next()
call on the iterator.
Symbol.iterator
method to make them iterable
primes[Symbol.iterator]()
[...oneDigitPrimes()]
[...o.g()]
for/of
loop, however
take()
generator like this
Promises, new in ES6, are objects that
represent the not-yet-available result
of an asynchronous operation.
async
and await
were introduced in ES2017 and provide
new syntax that simplifies
asynchronous programming by allowing
you to structure your Promise based
code as if it was synchronous.
for/await
loop were introduced in ES2018 and
allow you to work with streams of
asynchronous events using simple loops
that appear synchronous.
setTimeout(checkForUpdates,
60000);
addEventListener()
let okay =
document.querySelector('#confirmUpdateDialogbutton.okay');
okay.addEventListener('click',
applyUpdate);
setInterval()
because that function invokes a
callback function repeatedly, which is
something that Promises are just not
designed to do.
getJSON(), we instead pass it to the then()
method. When the HTTP response
arrives, the body of that response is
parsed as JSON, and the resulting
parsed value is passed to the function
that we passed to then().
then()
method of a Promise object multiple
times, each of the functions you
specify will be called when the
promised computation is
complete.
getJSON("/api/user/profile").then(displayUserProfile,
handleProfileError);
getJSON()
runs normally, it passes its result to displayUserProfile(). If there is an error (the user is
not logged in, the server is down, the
user’s internet connection dropped,
the request timed out, etc.), then getJSON()
passes an Error object to handleProfileError().
getJSON()
completes normally but an error occurs
in displayUserProfile(). That callback function is invoked
asynchronously when getJSON()
returns, so it is also asynchronous
and cannot meaningfully throw an
exception (because there is no code on
the call stack to handle it).
getJSON()
is still passed to displayUserProfile(), but any error in getJSON()
or in displayUserProfile()
(including any exceptions thrown by displayUserProfile) get passed to handleProfileError().
then()
method invocations, without having to
nest each operation within the
callback of the previous one.
text()
and
json()
methods for accessing the body of the
response themselves return
Promises.
then()
in the chain, which means that the
first invocation of the then()
method must itself return a Promise.
That is not how Promises work,
however.
.then()
invocations, we are not registering
multiple callbacks on a single Promise
object. Instead, each invocation of
the then()
method returns a new Promise object.
That new Promise object is not
fulfilled until the function passed to then()
is complete.
.text(), .json(),
and other methods to request the body
of the HTTP response in various forms.
But since the body may not yet have
arrived, these methods must return
Promise objects.
.json()
method and returns its value. This is
the fourth Promise object, and it is
the return value of the callback1()
function.
then()
method, then()
returns a Promise p and arranges to
asynchronously invoke c at some later
time. The callback performs some
computation and returns a value v.
When the callback returns, p is
resolved with the value v. When a
Promise is resolved with a value that
is not itself a Promise, it is
immediately fulfilled with that
value.
json()
method can parse it and use that
parsed value to fulfill p4. When p4 is
fulfilled, p2 is automatically
fulfilled as well, with the same
parsed JSON value. At this point, the
parsed JSON object is passed to c2,
and task 3 begins.
.catch()
method makes it easy to handle errors
when working with Promises.
.catch()
method of a Promise is simply a
shorthand way to call .then()
with null as the first argument and an
error-handling callback as the second
argument.
.catch()
method of Promises is an alternative
that does work for asynchronous
code.
fetch()
call
.then()
call
then()
call
.then()
call
.catch()
call
.then()
call, so p2 rejects as well with the
same NetworkError object.
.catch()
method invocation in a Promise chain.
This should make it clear why this
shorthand method is preferred over
passing a second argument to .then(), and also why it is so idiomatic to
end Promise chains with a .catch()
call.
.catch()
elsewhere in a Promise chain. If one
of the stages in your Promise chain
can fail with an error, and if the
error is some kind of recoverable
error that should not stop the rest of
the chain from running, then you can
insert a .catch()
call in the chain, resulting in code
that might look like this:
.catch()
callback will be skipped, and the
return value of the previous callback
will become the input to the next
.then()
callback.
.catch()
callback, it stops propagating down
the Promise chain. A .catch()
callback can throw a new error, but if
it returns normally, than that return
value is used to resolve and/or
fulfill the associated Promise, and
the error stops propagating.
Promise.all()
can do this. Promise.all()
takes an array of Promise objects as
its input and returns a Promise.
Promise.all()
rejects when any of the input Promises
is rejected. This happens immediately
upon the first rejection and can
happen while other input Promises are
still pending. In ES2020, Promise.allSettled()
takes an array of input Promises and
returns a Promise, just like
Promise.all() does. But Promise.allSettled()
never rejects the returned Promise,
and it does not fulfill that Promise
until all of the input Promises have
settled. The Promise resolves to an
array of objects, with one object for
each input Promise. Each of these
returned objects has a status property
set to "fulfilled" or
"rejected." If the status is
"fulfilled", then the object
will also have a value property that
gives the fulfillment value. And if
the status is "rejected",
then the object will also have a
reason property that gives the error
or rejection value of the
corresponding Promise.
Promise.race()
instead of Promise.all(). It returns a Promise that is
fulfilled or rejected when the first
of the Promises in the input array is
fulfilled or rejected.
async
and await
take efficient, Promise-based code and
hide the Promises so that your
asynchronous code can be as easy to
read and as easy to reason about as
inefficient, blocking, synchronous
code.
await
keyword does not cause your program to
block and literally do nothing until
the specified Promise settles. The
code remains asynchronous, and the await
simply disguises this fact. This means
that any code that uses await is
itself asynchronous.
async
keyword.
async
means that the return value of the
function will be a Promise even if no
Promise-related code appears in the
body of the function.
getHighScore()
function is declared async, so it returns a Promise. And
because it returns a Promise, we can
use the await
keyword with it:
getJSON()
function using async:
Promise.all()
to wait for all the Promises in the
array to be fulfilled. But suppose we
want the results of the first fetch as
soon as they become available and
don’t want to wait for all the URLs to
be fetched.
for/await
loop is no different than a regular
await expression in that way